<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>农产品价格可视化系统</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/layout.css') }}"> -->
        <style type="text/css">
        @media (max-width: 991px) {
            .navbar-header {
                float: none;
            }
            .navbar-left,
            .navbar-right {
                float: none !important;
            }
            .navbar-toggle {
                display: block;
            }
            .navbar-collapse {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }
            .navbar-fixed-top {
                top: 0;
                border-width: 0 0 1px;
            }
            .navbar-collapse.collapse {
                display: none!important;
            }
            .navbar-nav {
                float: none!important;
                margin-top: 7.5px;
            }
            .navbar-nav>li {
                float: none;
            }
            .navbar-nav>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .collapse.in {
                display: block !important;
            }
        }

        .navbar-default .navbar-brand,
        .navbar-default .navbar-nav>li>a,
        .navbar-default .navbar-nav>li>a:hover,
        .navbar-default .navbar-nav>li>a:visited,
        .navbar .navbar-brand:hover {
            color: #fff;
        }

        .navbar-default .navbar-nav>li {
            margin-right: 4px;
        }

        .container-fluid>.navbar-header {
            margin-right: 40px;
            margin-left: 0;
        }

        .navbar-form {
            margin-left: 30px;
        }

        .bdt {
            width: 0;
            position: absolute;
            top: 0;
            left: 50%;
            background-color: #fff;
            height: 2px;
            transition: all .3s ease-out;
        }

        a:hover .bdt {
            width: 100%;
            left: 0;
            transition: all .3s ease-out;
        }

        /*#footer {
            text-align: center;
            color: white;
            background-color: #333;
            padding: 30px;
            font-size: 15px;
        }

        #footer p {
            margin-bottom: 0;
        }

        #footer a {
            text-decoration: none;
            color: #6FA4CA;
            margin-left: 2px;
            margin-right: 2px;
            transition: color .3s;
            -o-transition: color .3s;
            -ms-transition: color .3s;
            -moz-transition: color .3s;
            -webkit-transition: color .3s;
        }

        #footer p a:hover {
            color: #24597F;
        }*/
        </style>
        {% block style %} {% endblock %}
    </head>

    <body>
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="row">
                    <div class="navbar-header col-md-3">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nn-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand " href="#">农产品价格可视化系统</a>
                    </div>
                    <div class="collapse navbar-collapse col-md-6" id="nn-navbar-collapse">
                        <ul class="nav navbar-nav navbar-left ">
                            <li><a class="active" href="#">
                        <span class="bdt"></span>首页</a></li>
                            <li><a href="#"><span class="bdt"></span>数据资源</a></li>
                            <li><a href="#"><span class="bdt"></span>填充数据2</a></li>
                            <li><a href="#"><span class="bdt"></span>填充数据3</a></li>
                        </ul>
                        <form class="nav navbar-form navbar-left " role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="请输入查找内容">
                            </div>
                            <button type="submit" class="btn btn-default" style="background-color: transparent;color: white;">搜索</button>
                            <!-- <button type="button" class="btn btn-default "></button> -->
                        </form>
                    </div>
                </div>
            </div>
        </nav>
        <div class="main">
            {% block body %}{% endblock %}
        </div>
        <div class="footer">
                {% block footer %}{% endblock %}
        </div>
    </body>

</html>